<style lang="scss" scoped>
    .question-list{
        width:90%;
        min-height: 200px;
        .item{
            width: 180px;
            overflow: hidden;
            height: 95px;
            background: url('~@/assets/questions_bg.png') no-repeat;
            background-size: 100% 100%;
            padding: 0 6px;
            .head{
                color: #fff;
                line-height: 36px;
                height: 36px;
                width: calc(100% - 6px);
                position: relative;
                border-bottom:1px solid #00A0E9;
                // &::after{
                //     content: '';
                //     width:90%;
                //     height: 1px;
                //     display: block;
                //     // background: red;
                //     position: absolute;
                //     left: 0;right: 0;
                //     bottom: 0;
                //     // border-bottom:1px solid #00A0E9;
                // }
                i{
                    line-height: 36px;
                }
            }
            p{
                padding:6px;
                margin:0;
                line-height: 20px;
            }
        }
    }
    .answer-list .item{
        height: auto;
        p{
            width: 48%;
            padding: 0;
        }
    }
</style>
<template>
    <div class="create_lesson pb-2">
        <Form :model="fm" :label-width="80" class="p-1 border-radius">
            <FormItem label="课堂主题">
                <Input v-model="fm.title" style="width:90%" placeholder="请输入课堂主题"></Input>
            </FormItem>
            <FormItem label="课堂简介">
                <editor @changeEdit="changeEdit" style="width:90%;height:400px"/>
            </FormItem>
            <FormItem label="考题列表" >
                <div class="d-flex mb-1">
                    <Button ghost type="primary" @click="setParentNode" :disabled="questionDisabled">新建主题</Button>
                </div>
                <Tree :data="treeData" empty-text='' :render="treeRender" ref='tree' @on-select-change="getNode"></Tree>
                <div class="question-list border p-1 border-radius d-flex wrap">
                    <div class="item mr-1 mb-1 mt-1" v-for="(val,index) in currentQuestionList" :key="index">
                        <div class="d-flex between head mt-1 mx-auto" >
                            <h4>{{`${val.is_multi?'多选题':'单选题'} (${ val.score }分)`}}</h4>
                            <Icon type="md-close" size="16" class="pointer" @click="!questionDisabled && questionList.splice(index,1)"/>
                        </div>
                        <p class="substr-line-more font-12">{{val.title}}</p>
                    </div>
                </div>
            </FormItem>
            <FormItem label="答案展示" v-if="questionList.length">
                <div class="mb-1">
                    <Button ghost type="primary" @click="openAnswerDialogFunc">新建答案</Button>
                    <span class="ml-2 font-12 color-999">上传固定答案的模型文件或视频，一旦填写 则不能修改主题和考题</span>
                </div>
                <div class="question-list answer-list border p-1 border-radius d-flex wrap">
                    <div class="item mr-1 mb-1" v-for="(val,index) in answerList" :key="index">
                        <div class="d-flex between head mt-1 mx-auto" >
                            <h4>组合{{index+1}}</h4>
                            <Icon type="md-close" size="16" class="pointer" @click="answerList.splice(index,1)"/>
                        </div>
                        <div class="d-flex wrap between p-1 pb-3">
                            <p v-for="(v,i) in val.answers" :key="i">No{{(i+1)+':'+v}}</p>
                        </div>
                    </div>
                </div>
            </FormItem>
            <FormItem label="终极课程">
                <i-switch v-model="fm.is_last" size="large" class="mr-2" :false-value="0" :true-value="1">
                    <span slot="open">是</span>
                    <span slot="close">否</span>
                </i-switch>
                <span class="font-12 color-999">是否是最后一堂课，终极课程的评价系统有别的普通课程</span>
            </FormItem>
            <FormItem label="附件列表">
                <upload-button @set_files="set_files"/>
            </FormItem>
            <FormItem>
                <!-- <Button @click="submit" type="primary" size="large" class="mr-1" :disabled="!!totalScore && totalScore!==100">提交</Button> -->
                <Button @click="submit" type="primary" size="large" class="mr-1" >提交</Button>
            </FormItem>
        </Form>
        <create-question-modal  :node="active_node" :openQuestionsDialog="openQuestionsDialog" @add="addQuestion" @close="openQuestionsDialog=false"/>
        <create-answer-team  :openAnswerDialog="openAnswerDialog" @close="openAnswerDialog=false" @add="addAnswer" :questionList="questionList"/>
    </div>
</template>

<script>
import editor from "@/components/editor"
import createQuestionModal from "@/components/createQuestionModal"
import createAnswerTeam from "@/components/createAnswerTeam"
import uploadButton from "@/components/uploadButton"
import {lesson_add} from '@/common/tapi'
import {randomString} from '@/common/tool'

export default {
    data(){
        return {
            fm:{
                title:'',
                content:'',
                is_last:0,
                exam_questions:'',
                files:'',
                nodes:'',
                answers:''
            },
            questionList:[],
            answerList:[],
            openQuestionsDialog:false,
            openAnswerDialog:false,

            active_node:{
                id:'',
                title:''
            },
            buttonProps: {
                type: 'default',
                size: 'small',
                ghost:true
            },
            treeData: [],
        }
    },
    methods:{
        set_files(listStr){
            this.fm.files=listStr
        },
        addQuestion(data){
            this.questionList.push(data)
        },
        addAnswer(data){
            this.answerList.push(data)
        },
        changeEdit(data){
            this.fm.content=data
        },
        openAnswerDialogFunc(){
            if(!this.answerList.length){
                this.$Modal.confirm({
                    title: '提示',
                    content: '请完整填写全部考题后再填写答案，一旦填写 将不能对主题和考题进行修改，是否继续？',
                    onOk: () => {
                        this.openAnswerDialog=true
                    },
                });
            }else
                this.openAnswerDialog=true
        },
        submit(){
            const getField=(arr)=>{
                return arr.map(el=>({id:el.id,title:el.title,level:el.level,nodeKey:el.nodeKey,children:getField(el.children || [])}))
            }
            this.fm.exam_questions=JSON.stringify(this.questionList)
            this.fm.answers=JSON.stringify(this.answerList)
            this.fm.nodes=JSON.stringify(getField(this.treeData))
            lesson_add(this.fm)
            .then(res=>{
                if(res){
                    this.$Notice.success({
                        title: '提交成功',
                        desc: '课程创建成功'
                    });
                    this.$router.push('my_lesson')
                }
            })
        },
        setParentNode(){
            let title=''
            this.$Modal.confirm({
                render: (h) => {
                    return h('div',[
                        h('h3',`请输入主标题`),
                        h('Input', {
                            props: {
                                autofocus: true,
                            },
                            class:'mt-1',
                            on: {
                                input: (val) => {
                                    title = val;
                                }
                            }
                        })
                    ])
                },
                onOk:()=>{
                    if(!title) return 
                    this.treeData.push( {
                        id:randomString(),
                        title,
                        level:0,
                        expand: true,
                        render: (h, { root, node, data }) =>this.treeRender(h, { root, node, data })
                    })
                }
            })
           
        },
        getNode(){
            const node=this.$refs.tree.getSelectedNodes()
            if(node.length){
                const {title,id}=node[0]
                this.active_node={id,title}
            }
        },
        treeRender(h, { root, node, data }){
            return h('span', {
                style: {
                    display: 'inline-block',
                }
            }, [
                h('span', [
                    h('Icon', {
                        props: {
                            type: 'ios-paper-outline'
                        },
                        style: {
                            marginRight: '8px'
                        }
                    }),
                    h('span', data.title)
                ]),
                h('span', {
                    style: {
                        display: 'inline-block',
                        float: 'right',
                        marginRight: '32px'
                    }
                }, [
                    h('Button', {
                        props: Object.assign({disabled:this.questionDisabled}, this.buttonProps, {
                            icon: 'ios-add'
                        }),
                        class:'ml-1',
                        on: {
                            click: () => { this.append(data) }
                        }
                    }),
                    h('Button', {
                        props: Object.assign({disabled:this.questionDisabled}, this.buttonProps, {
                            icon: 'ios-remove'
                        }),
                        class:'mx-1',
                        on: {
                            click: () => { this.remove(root, node, data) }
                        }
                    }),
                    h('Button', {
                        props: Object.assign({disabled:this.questionDisabled}, this.buttonProps),
                        on: {
                            click:()=>this.openQuestionsDialog=true
                        }
                    },'添加考题')
                ])
            ]);
        },
        append (data) {
            let title=''
            this.$Modal.confirm({
                render: (h) => {
                    return h('div',[
                        h('h3',`请输入${data.title}的子标题`),
                        h('Input', {
                            props: {
                                autofocus: true,
                            },
                            class:'mt-1',
                            on: {
                                input: (val) => {
                                    title = val;
                                }
                            }
                        })
                    ])
                },
                onOk:()=>{
                    if(!title) return 
                    const children = data.children || [];
                    children.push({
                        id:randomString(),
                        title,
                        level:data.level+1,
                        expand: true
                    });
                    this.$set(data, 'children', children);
                }
            })
        },
        remove (root, node, data) {
            this.$Modal.confirm({
                title: '提示',
                content:`确认删除主题 ${data.title} 及该主题下所有题目吗？`,
                onOk: () => {
                    const parentKey = root.find(el => el === node).parent;
                    const parent = root.find(el => el.nodeKey === parentKey).node;
                    const index = parent.children.indexOf(data);
                    parent.children.splice(index, 1);
                }
            });
        }
    },
    computed:{
        currentQuestionList(){
            return this.questionList.filter(el=>el.node_id===this.active_node.id)
        },
        questionDisabled(){
            return !!this.answerList.length
        }
    },
    components:{
        editor,
        createQuestionModal,
        uploadButton,
        createAnswerTeam
    }
}
</script>